<script src="__PUBLIC__/js/jquery/validate.js"></script>
<script>
    jQuery.validator.addMethod("isMobile", function(value, element) {  
            var length = value.length;        
            var mobile=/^1[3,5,8]\d{9}$/;
            if(value.length >0){
            return (mobile.exec(value))? true:false;  
            }else{
                return true;
            }
        }, "请正确填写您的手机号码"); 
        $("#form").validate({
            errorPlacement: function(error, element){
                var error_td = element.parent('td');
                error_td.next("td").find('label.error').hide();
                error_td.next("td").append(error);
            },
            submitHandler:function(form){
               saveAddr('{$id}');
            },
            rules : {
                truename : {
                    required : true,
                    minlength: 2,
                    maxlength: 8
                },
                addr : {
                    required : true,
                    minlength: 4,
                    maxlength: 35
                },
                phone : {
                    required : true,
                    isMobile  : true
                },
                phone2 : {
                    isMobile  : true
                }
                
            },
            messages : {
                truename : {
                    required : '姓名不能为空',
                    minlength:  '姓名必须在2-8个字符之间',
                    maxlength : '姓名必须在2-8个字符之间'
                },
                addr : {
                    required : '地址不能为空',
                    minlength:  '地址必须在4-50个字符之间',
                    maxlength : '地址必须在4-50个字符之间'
                },
                phone : {
                    required: "手机号码不能为空",
                    isMobile: "手机号码格式不对"
                },
                phone2 : {
                    isMobile: "手机号码格式不对"
                }
                
            }
        });
    function saveAddr(id){
        if($('.order_p_address').length >4 && id == ''){
            showTip('系统提示',"最多保存五个收货地址！",'2',1.5);
            return false;
        }
        var addr = $("#addrBox").val();
        var phone = $("#phoneBox").val();
        var phone2 = $("#phoneBox2").val();
        var truename = $("#truenameBox").val();
        $.post("{:U('Box/saveAddr')}",{
            id:id,
            phone:phone,
            phone2:phone2,
            addr:addr,
            truename:truename
        },function(data){
           
            if(id == ''){
                if($('.change_address').length == 1){
                    $('.order_p_address').remove();
                    var div = "<div class='order_p order_p_address'  id='addr_"+data+"' data-id="+data+">\n\
<span class='u_truename'>"+truename+"</span>\n\
<span class='u_phone'>"+phone+"</span>\n\
<span class='u_addr'>"+addr+"</span>\n\
<a class='delete' href='javascript:;' onclick=delAddr($(this),'') style='display: none;'>×</a>\n\
<a class='edit' href='javascript:;' onclick=editAddr($(this),'') style='display: none;'>修改</a>\n\
</div>";
                    $('.order_p_time').before(div);
                    
                }else{
                    if(data>0){
                        var div = "<div class='order_p2 order_p_address' id='addr_"+data+"' data-id="+data+">\n\
<span class='u_truename'>"+truename+"</span>\n\
<span class='u_phone'>"+phone+"</span>\n\
<span class='u_addr'>"+addr+"</span>\n\
<a class='delete' href='javascript:;' onclick=delAddr($(this),'"+data+"') style='display: none;'>×</a>\n\
<a class='edit' href='javascript:;' onclick=editAddr($(this),'"+data+"') style='display: none;'>修改</a>\n\
<a  class='edit2' href='javascript:;' onclick=setAddr($(this),'"+data+"') style='display: none;'>选择</a> \n\
</div>";
                    $('.order_p_time').before(div);
                    }else{
                        $('div.order_p_address').children(".u_truename").text(truename);
                    $('div.order_p_address').children(".u_phone").text(phone);
                    $('div.order_p_address').children(".u_phone2").text(phone2);
                    $('div.order_p_address').children(".u_addr").text(addr);
                    }
                    
                }
            }else{
                 $('#addr_'+id).children(".u_truename").text(truename);
                    $('#addr_'+id).children(".u_phone").text(phone);
                    $('#addr_'+id).children(".u_phone2").text(phone2);
                    $('#addr_'+id).children(".u_addr").text(addr);
            }
            $('div.order_p_address').hover(function(){
                        $(this).children("a").show();
                    },function(){
                        $(this).children("a").hide();
                    })
            closebgbox('#mainbox')
        })
       
    }
    
</script>
<style>
    .table td{padding:12px 0 8px}
    </style>
<div class='browsebox' id='browsebox' style='width:385px;'>
    <div class='head' id='headbox'>
        <a class='close' onclick="closebgbox('#mainbox')"></a>
        <span id='title'>送达地址</span>
    </div>
    <div class='boxcontent' style='padding:20px 0 30px'>
        <div class='select_address' id='select_address'>

            <form id="form" name="form">
                <table class="table" style="margin:0 auto">
                    <tr>
                        <td width="70px;" align="left"><span class="red" style="font-weight:600">*</span> 姓名：</td>
                        <td><input  type="text" id="truenameBox" style="width:160px;"name="truename" value="{$truename}" maxlength="5"/></td>
                        <td align="left"></td>
                    </tr>
                    <tr>
                        <td width="70px;"align="left"><span class="red" style="font-weight:600">*</span> 手机：</td>
                        <td><input  type="text" id="phoneBox" style="width:160px;" name="phone" value="{$phone}" maxlength="11"></td>
                        <td align="left"></td>
                    </tr>
                    <tr>
                        <td width="70px;"align="left">备选手机：</td>
                        <td><input  type="text" id="phoneBox2" style="width:160px;" name="phone2" value="{$phone2}" maxlength="11"></td>
                        <td align="left"></td>
                    </tr>
                    <tr>
                        <td width="70px;"align="left"><span class="red" style="font-weight:600">*</span> 地址：</td>
                        <td width="120px"align="left"><input  type="text" id="addrBox" name="addr"style="width:160px;" value="{$addr}" maxlength="50"/></td>
                        <td></td>
                    </tr>
                </table>
           
            <p class='mt_20'>
                <input type="submit" class="orange_btn" value="保存">
                <a href='javascript:;' class='cancel_btn' id='address_cancel' onclick="closebgbox('#mainbox')">取消</a>
            </p>
            </form>
<!--            onclick="saveAddr('{$id}')"-->
        </div>
        <div class='clear'></div>
    </div>

</div>